<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片懒加载</title>
	<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
	<script src="../js/jquery-1.4.1.min.js"></script>
	<style type="text/css">
		.imgcontainer{
			margin-top: 100px;
			height: 100px;
			border: 1px solid #ff0000;
		}
	</style>
</head>
<body>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>
	<div class="imgcontainer"><img height="100px" src="" alt="" data-lazysrc="../images/1.jpg"></div>

	<script type="text/javascript" src="jquery.lazyload.js"></script>

	<script type="text/javascript">
		$(function () {
			$('img').lazyLoad();
		})
	</script>
</body>
</html>